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CHAPTER 1 


The Birth 


In the first chapter, we explore the evolution of JavaScript and web 
development frameworks. We discuss the significance of embracing 
new technologies and compare code snippets in different frameworks 
to highlight their benefits. We introduce Next.js as a framework built on 


Reactjs, addressing limitations and incorporating new features. 


The chapter concludes with the recommendation to shift focus to 
Next.js for building modern web applications. 


The Birth 


The Birth 


Not too long ago, in 2015, React.js entered the scene. However, even the 
journey of JavaScript in the IT industry hasn't been exceptionally long. 
Originally developed by Brenden Eich at Netscape in 1995, JavaScript 
gained significant popularity during the 2000s. 


This was largely due to Google's ingenious utilization of JavaScript to 
introduce interactive and dynamic features for map exploration. 
Subsequently, developers were introduced to frameworks and libraries, 
including jQuery, Angular, Node.js, React.js, and, most recently, Nextjs. 
These technologies have revolutionized the web development 


landscape, offering developers various capabilities and possibilities. 


You might wonder why this information is relevant in the context. The 
significance lies in the fact that it highlights the timeless truth that 
"change is constant.” As we continue to advance and evolve as a 


society, our tools and technologies will naturally progress alongside us. 


We have no other option but to embrace and adapt to these changes. It 
serves as a reminder that our willingness to embrace new ideas and 
technologies is essential for growth and success in the ever-changing 


IT industry landscape. 


These technologies and tools share a common purpose: to enhance 
work efficiency and improve performance. In this era, we can still use 
vanilla JavaScript or create websites using HTML and CSS without a 
doubt. 
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However, when it comes to developing applications on a large scale, 
the efficiency of using the latest technologies surpasses that of 
traditional approaches. To showcase and experiment with this concept, 
we have created a video on How to create a website using HTML & Css 
on our YouTube channel. You can personally analyze the amount of 


code and the level of efficiency demonstrated in the video. 


To provide a brief glimpse of the evolution in JavaScript coding 
practices, here is a well-known code snippet implemented in various 
frameworks, starting from the core JavaScript language itself — The 
Hello World: 


Vanilla JavaScript 


document. getElementB 


jQuery 
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Angular 


<!-- HTML: < (click)="showMessage()">Click Me</button> --> 


t ~ Component } from '@angular/core'; 


@Component ({ 
selector: 'app-example', 
template: *<button (click)="showMessage()">Click Me</button>* 


c amp J 
howMessage(): void { 
("Hello, World!"); 


; React.Component { 


Om 
alert('Hello, World!'); 


Od 


return < 


“Ah? From what | see, there's an increase in the amount of code being 
written. It appears to be in complete opposition to what was mentioned 


earlier” — Are you thinking the same? 


If we look at it solely from this perspective, one would certainly feel that 


the original language and framework require less code. 
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However, it’s important to consider the bigger picture. And that's what 
truly matters, doesnt it? In reality, we don't just build "Hello World" 
projects. We undertake more substantial projects that demand the 
utilization of various frameworks and tools to achieve the desired 


functionality and scalability. 


We could have talked about the “big picture” of using React or even 
Angular over vanilla code, but that is not the primary focus of this 
eBook. However, it is worth mentioning a few foundational reasons why 


these new tools make development more efficient: 


Architecture — React and Angular follow a Component-Based 
Architecture, encouraging code reusability. For instance, if you create a 
component like a Button, you can use it anywhere in the application as 
often as needed. This reusability enhances the maintainability and 
scalability of the application. 


Virtual DOM — The Virtual DOM is a lightweight representation of the 
actual DOM. It facilitates efficient and optimized updates to the user 
interface, resulting in improved performance. Simply put, it tracks 
changes within the application and performs a “diffing" process by 
comparing the previous version of the virtual DOM with the new version. 


It identifies the differences and updates the real DOM accordingly. 


Ecosystem & Community — Modern libraries like React.js have vibrant 
and active communities. This provides developers with abundant 
resources, extensive documentation, reusable code packages, bug 


fixes, and support. 
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.. and many other libraries or framework-specific reasons that you can 
explore. To truly appreciate the impact, | would once again recommend 
visiting the YouTube videos we created, where you can experience 
firsthand what it takes to build a simple landing page using two 


different tools to measure the efficiency of these tools: 
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But hey, where does Next.js come in the picture? 


As mentioned earlier, as we continue to progress, technology also 
advances. jQuery addressed the limitations of vanilla JavaScript, and 
then React.js emerged to overcome the shortcomings and loopholes of 
jQuery. However, even React.js has its own challenges, which have now 


been addressed by another tool called Next.js. 


It’s a big misconception that Next.js is a new language or library. No! 
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Vercel, the team behind Next.js, embarked on a unique approach to 
develop a framework encompassing client-side (frontend) and server- 
side (backend) functionalities within a single application. Guillermo 
Rauch, the original creator of Next.js and the mastermind behind 


Socket.lIO, began working on this idea in 2016. 


Over the course of a year, they continuously added new features such 
as file-based routing, automatic code splitting, hybrid rendering, 


internationalization, image and font optimization, and many more. 


The relentless dedication of the Vercel developers, coupled with their 
ability to transform diverse ideas into reality, has caught the attention 
of Meta (previously known as Facebook) — the creators of Reactjs. Meta 
now explicitly recommends that developers use Next.js as their primary 
tool instead of relying solely on Reactjs. It's an extraordinary 


achievement! 


And that’s how we developers now need to shift our focus to the latest 
and greatest version, Next.js 13, to build highly capable and production- 
ready applications. This exciting evolution opens up new possibilities 


and opportunities for creating advanced web applications. 


Onto the next chapter... 


CHAPTER 2 


Introduction 


In this chapter, we'll dive into Next.js, a flexible React framework. We'll 
explore its advantages over Reactjs, including simplified frontend 
development, reduced tooling time, and an easy learning curve. We'll 
also discuss how Nextjs improves performance, enhances SEO, and 


keeps advancing with new features. 


By the end, you'll grasp the importance of mastering Next.js and be 


prepared to embark on an exciting journey with this framework. 
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Next.js — A flexible React Framework. But what does that mean? 


In software development, a framework serves as a tool equipped with 
predefined rules and conventions that offer a structured approach to 
constructing an application. It provides an environment that outlines 

the overall architecture, design patterns, and workflows, allowing 


developers to focus on implementing specific application logic rather 
than dealing with low-level design. 


Simply put, a framework provides pre-built solutions for common 
functionalities such as integrating databases, managing routing, 


handling authentication, and more. 


So what sets Next.js apart from React.js? — Next.js introduces plenty of 
features and capabilities that we will dive into in the upcoming chapter 


in detail. 


But what you need to understand is Next.js is essentially an extension of 
Reactjs, incorporating pre-built solutions, ready-to-use features, and 
some additional functionalities. In other words, Next.js is built on top of 


React, expanding its capabilities. 


If you're already a React.js developer, the Next.js journey will be silky 
smooth. If you don’t know Reactjs, you should familiarize yourself with 
some of the main foundations of Reactjs, i.e., How to create a 


component, state management, code structure, etc. 


Introduction 


To help you learn faster, we have a crash course on Reactjs that covers 
all the important things and includes a project for you to practice and 


test your skills: 


{5} 


React.js Crash Course 


Crash Course _{_ 20 i mmrnersrien fs 


Build a REAL Project 


But Why should you use a React Framework — Next.js? 


React is constantly evolving and revolutionizing the way websites are 
built. It completely transforms your approach to designing and 


developing applications. 


It begins by encouraging you to think about components, breaking 
down the user interface into small pieces of code. You describe states 
to introduce interactivity and establish connections between these 


various components, shaping the flow of your application. 


Implementing the great React architecture requires deep integration 
between all parts of your application, and this is where frameworks 


come in: 
Less tooling time 


Every aspect of frontend development has seen innovation, from 


compiling, bundling, minifying, formatting, etc., to deploying and more. 
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With Next.js, we won't have to worry about configuring these tools, thus 


investing more time in writing React code. 


We can focus more on business logic using open-source solutions for 


routing, data fetching, rendering, authentication, and more. 
Easy Learning Curve 


If you are familiar with React.js, you will discover Next.js is considerably 


simpler. 


Next.js, built on the foundation of React.js, offers exceptional 
documentation that provides comprehensive and detailed information 
on the why and how of using Next.js. The ‘Introduction | Learn Next,jsf 
guide developed by the Vercel team is regarded as one of the best 


resources for the learning experience. 


The constant updates and help from the community make the 


development process even easier. 


One of the key aspects of Next.js is that it is not just a Frontend React 
Framework but a Full Stack React Framework enabling you to write 


backend code alongside your frontend code. 


How does it contribute to an "Easy Learning Curve"? Wouldnt it be 


another thing to learn? 
Absolutely not. 


The backend aspect of the code you'll be working with is much simpler 
than you might anticipate. There's no need to set up anything or 


configure any routes as we have to do for any traditional backend app. 
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In fact, the Vice President of Vercel, Lee Robinson, expressed the 


following viewpoint: 


y Moving from React + Express + Webpack to a framework 


resulted in removing 20,000+ lines of code and 30+ 


dependencies — while improving HMR (Hot Module 


Reloading) from 1.3s to 131ms. 


If the backend and tooling aspects discussed here seem confusing, 
there's no need to worry. In the upcoming chapters, we will dive into a 
practical comparison of how things are done with React.js and 


Express.js, as well as how both can be accomplished within Nextjs. 
Improved Performance 


Next.js offers built-in features like server-side rendering, static site 
generation, and automatic code splitting, which optimize application 
performance by enabling faster initial page loads, improving SEO, and 


enhancing the user experience. 


However, it doesn't mean server-side capabilities are limited to Next.js 
alone. React has introduced a new concept called React Server 


Components, which allows rendering components on the server side. 
So, why choose Next.js over using React alone? 


The advantage lies in the convenience and productivity provided by 
Next.js. By utilizing Next.js, you can leverage the existing features of 


React without the need for extensive setup and configuration. 


Introduction 


Next.js automates many aspects, allowing you to focus more on utilizing 


the features rather than dealing with infrastructure & boilerplate code. 


This approach follows the principle of “Convention over Configuration,” 
streamlining the development process and reducing the amount of 
code you need to write compared to implementing React Server 


Components independently. 
SEO - Search Engine Optimization 


Perhaps the most ignored and must topic in an application’s life, and 
the only drawback of Reacts. 


The key difference lies in the rendering approach between Next.js and 


Reactijs. 


Search engine crawlers are like busy visitors to websites. They come 
and ask for the content of pages. They explore the links on those pages, 
carefully examining and organizing them for ranking purposes. This is 
what they do every day. To do their job well, they need to be able to 
access the content of the website pages. 


React.js renders everything on the client side, sending a minimal initial 
HTML response from the server. The server sends a minimal HTML file 
code and a JavaScript file that the browser executes to generate the 
HTML. This poses a challenge for search engine crawlers to access and 


understand the complete content of the page. 


On the other hand, Next.js provides the option of Static Site Generation 
(SSG) or Server Side Rendering (SSR). 
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With SSG or SSR, the server sends the complete HTML file and minimal 
JavaScript code to render only the content requiring client-side 
interaction. This enables search engine crawlers to access easily and 


index every page of the Next.js website accurately. 
But, now you might wonder, “Why should | prioritize SEO?" 


SEO is essential for making your website visible and highly ranked in 
search engine (browser) results. When you focus on SEO, you get 
several benefits, like more people visiting your website, better user 
experience, increased trust and credibility, and an advantage over your 


competitors because your website shows up higher in search results. 


Giving priority to SEO can greatly impact how well your website does 


and how many people find it online. 
Always Advancing 


Next.js, the ever-evolving framework, consistently introduces new 
features to simplify developers’ lives. With over 7+ versions released last 
year, Next.js focuses on innovation and improvement for a better user 
experience. This is precisely what frameworks like Next.js aim to achieve, 


making development easier and more efficient. 


On top of that, other technologies like Expo, used for building React 


Native projects, are also adopting Next.js's groundbreaking features. 


Inspired by Nextjs's file-based routing system, Expo developers have 


implemented a similar feature — to improve the decade- 


old routing system in React Native. 
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Isn't that great? Master one feature and effortlessly utilize it across 
multiple platforms 


However, the list of features provided by Next.js goes beyond what has 
been mentioned so far. 


It offers a wide range of capabilities, including seamless file-based 
routing, efficient code splitting, image & font optimization, HMR(Hot 
Module Replacement), API Routes(backend), built-in support for Sass, 
CSS modules, data fetching choice (SSG, SSR, ISR), error handling, 
Metadata API (For SEO), Internationalization(support for any spoken 


language), etc. 


It is best to try these features firsthand through practical 
implementation to truly appreciate its potential. That's precisely what 


we will do in the upcoming lessons — dive into the coding aspect! 


"Hmm, alright. I'm willing to trust your insights on the new features of 
Next.js and such. However, is it actually being used by people? Are 
companies actively seeking professionals with Next.js expertise? Is 


there a high demand for it in the industry?" 
— Are you wondering the same? 


Let the data speak for itself: 
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In the past 30 days, Next.js has received significantly higher search 


interest worldwide than Reactjs. 


But hey, that’s just a Google trend. What about the industry? Are people 


even creating websites using Next.js? 


Sure, let’s take a look at “The Next.js Showcase)’ which shows different 


companies using Next.js: 


« Notion * TED ¢ Futurism 

¢ Hulu ¢ AuthO ¢ Material-UI 
* Netflix Jobs ¢ Product Hunt * Coco Cola 
* Nike ¢ Hyundai ¢ Ferrari 

¢« HBO Max « Porsche ¢ Hashnode 
* Audible * repl.it * Verge 

* Typeform * Marvel 
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And many more renowned names. This demonstrates the genuine 


excitement and widespread adoption of Next.js! 


Considering the rapid rate at which companies embrace Nextjs, it 
would be no surprise to witness a huge surge in demand for Next.js jobs 


in the coming months, if not years. 


Now is the perfect time to seize the opportunity and prepare for the 


future job market by mastering Next.js. 


With this book and the courses we have done and will continue to do, 
you can be the next Next.js developer. 


So, grab a cup of coffee, and let's get started on this exciting journey! & 


CHAPTER 3 


The Roadmap 


The Roadmap is a concise guide to web development essentials. It 
covers HTML for structuring web content, CSS for styling and layout, and 
JavaScript for interactivity. Learners will grasp important concepts like 
semantic tags, visual effects, variables, control flow, functions, and 


manipulating the DOM. 


This chapter equips beginners with the skills needed to create dynamic 


and interactive web applications. 


The Roadmap 


The Roadmap 


Before we start exploring Next.js, reviewing or relearning some basic 
concepts is a good idea to make learning easier. It all begins with 


building a solid foundation through fundamentals. 


Think of this roadmap as a summary of what you should know as a 
foundation for learning Nextjs. It's alright if you're unfamiliar with 
advanced topics like integrating databases or implementing 


authentication. 


These points help you understand the main concepts without focusing 


on specific coding details. 


In Nextjs, there are various approaches to implementing these 
concepts. You have options like utilizing NextAuth] (one of the coolest 
features), exploring popular market solutions like or even building 


everything from scratch. 


Similarly, when it comes to databases, you can choose between 
different options such as SQL databases like NoSQL databases 


like or even consider using as an ORM (Object- 


Relational Mapping) manager. 


Whether or not you have coding experience is not the most important 
factor here. What truly matters is understanding the underlying 
concepts. The roadmap is designed to introduce you to these concepts 
and familiarize you with the beneficial knowledge when aspiring to 


become a Next.js Developer. 
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Later in the next chapters, and with our branded courses, you'll learn 


how to do all the code stuff in Next.js. So don’t worry; you have our back! 
Presenting the Roadmap, 


These points help you understand the main concepts without focusing 


on specific coding details. 


1 Web Development Fundamentals 


S| HTML - HyperText Markup Language 


Basics 


Understand the structure, elements, and attributes of HTML documents 


¢ Structure 


<!DOCTYPE> <html> <head> <body> 
¢ Elements 
+ Heading <h1> to <h6> * Image <img> 
° Paragraph <p> * Input <input> <textarea> 
¢ Lists <ul> <ol> <li> ¢ Button <button> 


* Link <a> ¢ Group Elements <div> 
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* Semantics 
Use elements like 


<header> <nav> <main> <section> <aside> <footer> 


etc. to enhance document structure of accessibility. 
* Forms 
Learn to create forms, handling user input, perform form validations by 


using form element and onSubmit event listener 


EJ CSS — Cascading Style Sheets 

Fundamentals 

Understand the structure, elements, and attributes of HTML documents 
¢ Structure 


* Box Model 


Understand how elements are styled using 


padding margin border 


¢ Selectors 


Learn about different types of selectors to target and style 


specific HTML elements. For example, 


Type Class Id Child Sibling 
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* Typography 


Explore text-related properties like 
font size weight alignment 
* Colors and Backgrounds 
Understand how to set different 


colors gradients background images 


Layout and Positioning 


* Display 


Learn the various display values like 


block inline inline-block 


* Position 


Explore how to position an element in different ways such as 


relative absolute sticky fixed 


* Flexbox 


Master the flexbox layout to create responsive website layouts 


* Grid 


Dive into CSS grid layout for advanced two-dimensional layouts 
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Effects 


* Transitions 


Learn to create smooth transitions using different CSS properties like 
delay timing duration property timing-function 


* Transformations 


Explore 2D and 3D transformations like 


scaling rotating translating elements 


*« Animations 


Learn how to create animations using keyframes 


* Shadows and Gradients 


Explore with box shadows and linear or radial gradients 


Advanced (Plus) 


« Learn how to use CSS processors like sass or frameworks like 


tailwindcss for more powerful and efficient styling 
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JS JavaScript 


Variables and Data Types 


Declaring variables and understanding different data types such 


as string, number, boolean, null, undefined, object, array, etc. 


Operators 


Learn to use different operators such as arithmetic, comparison, 


logical, and assignment to perform operations on data 


Control Flow 


Try & test conditional statements such as if else, switch and loops 


such as for while to control program flow 


Functions 


Define and learn to create different functions, understand function 


scope, and work with different parameters and return values 


DOM Manipulation 


Knowing how to use JavaScript to change and interact with HTML 
elements on a webpage is an important skill. It's like a building 
block that we use in different ways with tools like React or Next.js in 


the form of new APIs. 


Remember when we showed you different "Hello World” examples 
in vanilla JavaScript and React.js? The basic idea is the same, but 


the code structure is a bit different in React. 
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If you're uncertain about how to learn & create a website using HTML, 
CSS, and JavaScript, you can immediately build an attractive Sushi 


Website by simply following the right free course: 


2023 a. al os 
sus ehancam aba s Pa Build and Deploy a Sushi 
HTMLCSS © Website using HTML & CSS 
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2 Modern JavaScript 


¢ ES6 Features 


¢ Arrow Functions 


In JavaScript, there are different kinds of functions. One type that 
you'll often come across is called the Arrow function. Many prefer 


using arrow functions because they are shorter & easier to write. 


If you take the time to understand the syntax and how arrow 
functions work, it will help you write shorter and more 
straightforward functions. This can make your code look cleaner 


and easier to read. 


¢ Destructuring 


A helpful concept that will come in handy when we have to extract 


values from arrays and objects 
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¢ Destructuring 


A helpful concept that will come in handy when we have to extract 


values from arrays and objects 


¢ Spread Syntax 


Allows to expand elements of an array or object into individual 


elements 


* Template Literals 


One of the widely used. Using the back sticks **, we can 


interpolate strings with placeholders & expressions 


* Modules 


Learn how to import export code between files to organize the 


code 


* Asynchronous Programming 


* Promises 


Gain an understanding of the concept of promises and why they 
are necessary. Learn about resolving and rejecting promises and 


utilizing then and catch for handling asynchronous operations. 


* Async/Await 


Explore the usage of async/await to write asynchronous code in a 
more synchronous way. This convention is widely adopted as an 


alternative to using then and catch for handling promises. 
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¢ Fetch API 


Discover how to use the Fetch API in the browser to send HTTP 


requests and handle the resulting responses. 


* Axios (Plus) 


Explore the popular third-party library, Axios, which simplifies the 
process of making HTTP requests compared to the standard Fetch 


API. 


¢ Additional JavaScript Concepts 


¢ Array Methods 


Familiarize yourself with different widely used array methods to 


simplify the develooment process. For example, 


map slice includes 
filter splice join 
reduce forEach reverse 


and few others 


¢ Error Handling 


One of the crucial part of web development is to catch and 
display the errors properly. No user will like to see the complete 


red screen with a text — “Error on line 35”. Not even us. 
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Therefore, it is essential for every developer to cultivate the skill of 
error handling. Familiarize yourself with the try-catch-finally block, 
which enables you to capture errors and present them on the user 


interface using user-friendly and easily understandable language. 


3 The Ecosystem 


Before we proceed learning the libraries and frameworks like 
React.js and Next.js, we'll need some kind of config to setup these 


projects: 


* Foundations 


6S) Node.js 


A javascript runtime environment that allows us to run JavaScript 


code outside of the browser. 


It’s needed to work with React or Next.js. Make sure to download it 


ner NPM — Node Package Manager 


A tool that manages third party packages. Using it, you can 


download different packages needed inside you project like Axios 


¢ Bundlers and Compilers 


i$ Webpack 


TF 


Bundlers like webpack or Parcel help combine our JavaScript files 


and other assets into a single bundle 
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B@ Babel 


Transpilers like Babel convert modern JavaScript code to a version 


that works in all browsers 


* Version Control (Plus) 


Learning a version control system like Git is highly valuable for 


anyone on the path to becoming a developer. 
® Git - version control system 


© GitHub - a web based platform to manage git repositories 


in the cloud 


4 React JS 


From here, you're efficiently learning Next.js. The same concepts 


are as it is used in the Next. 


¢ Fundamentals 


* Components 


Think in terms of components. Learn to break the code or the UI in 


small manageable components for reusability & maintainability 


There are two ways in which we can create a component i.e., 


¢ Class Component 


« Function Component — Widely used 
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Along with that, learn “What is JSX?” and the “Component 


Lifecycle”. 


5 JSX is syntax in React that allows you two write HTML 
code. You won't even feel like you're using something 
different. It looks like HTML but isn't. 


State and Props 


State 


Learn how to create and manage state — A small store that holds 


a particular data of the application 


Props 


Learn how to pass props (a piece of data) between components 


Events 


Learn how to handle user interactions, such as clicks and form 


submissions, using event handlers. 


Conditional Rendering 


Learn how to conditionally render components and render 


dynamic list of data using the mapping techniques 


P.S., Don’t forget to learn about the special “Key” prop when rendering 
the dynamic list with map method. 
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¢ Hooks & Router 
¢ Hooks 


After learning how to create functional component, the next 
challenge will be to understand how to use hooks. 


Hooks are special functions that allows us to manage state, 
handle side effects and improve the efficiency. Few famous hooks 


are, 


useState useEffect useRef useContext useCallback useMemo 


« Router 


Learn how to do client side routing by understanding concepts like 


Routes Route parameters Nested routes 


1¥ React Router DOM is an independent package used to 
| handle the routing in React application 
| 


+ State Management 


Understand different state management options in React such as 


built-in state management — Context API 


Context API Redux Toolkit Zustland 
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* Style 


Explore different approaches to styling React components, 


including 


Inline styles CSS modules Sass TailwindCss Material UI 


CSS-in-JS libraries like 


styled-components Emotion 


¢ Forms & HTTP Requests 


¢ Forms 


Learn to create form validation, handling form submission with or 


without using third party libraries like, 


Formik React Hook Form 


- HTTP Requests 


Learn how to make requests using libraries like Axios or the built-in 


Fetch API 


If you want to learn the fundamentals, styling and how to do HTTP 


Requests in React, you can check out our FREE and highly popular Crash 


Course on YouTube: 
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React JS Full Course 2023 | 
Build an App and Master 


Crash Course __|. XBBBCC auntie COs 


Build a REAL Project . oo ‘ 
. atch and Code Now 2 


If you want to enhance your skills in state management using tools like 


Redux Toolkit, you can explore our professional-level course: 


Ultimate ReactJS Course 
with Redux Toolkit & Framer 
Motion jsmastery.pro 


atch and Code Now 7 


Al Powered Movie App 


Also, if you want to create websites with a modern and attractive 
design that will impress clients or potential employers, we suggest you 
check out this series. It teaches you how to build React websites using 


different styling techniques like TailwindCSSs, Sass, and even pure CSS. 


Build and Deploy a Fully 
Responsive Modern UI/UX 
Site in React JS - YouTube 


atch and Code Now / 
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5 Backend 


Although it’s not a must to know how to do the backend to 
become a Next.js developer, it’ll be nice to have the skill to 
showcase the ability to do both and become a full-stack Next.js 


developer. 


You can use the following steps to learn backend development in 


any technology stack you prefer. It can even be Python 


¢ Basics 


¢ HTTP Protocol 


Understand the HyperText Transfer Protocol and its fundamental 


concepts 


¢ APIs and REST 


APIs 
Learn what is Application Programming Interface (API) 
Explore methods, protocols and data formats that applications 


can use to to exchange information 


REST 
Learn what is Representational State Transfer 


¢ HTTP Methods 


GET POST PUT DELETE PATCH 
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* Status Code 


200 — ok 

201 — created 

404 — Not Found 

500 — Internal server error 


¢ HTTP Headers 
* Request and Response 


« Resource URI 


* CRUD 


¢ Understand the concept of CRUD operations 


(e — Creating data (POST) 


Reading data (GET) 


U — Updating data (PUT/PATCH) 


D — Deleting data (DELETE) 


¢« Authentication and Authorization 


Understand the difference between Authentication and 
Authorization 
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¢ User Sessions 


JWT — JSON Web Token 
* Cookies 


« Permissions and Roles 


* Database 


Familiarize yourself with databases in storing and managing 


application data 
« Relational Database 
YY MySQL 


PostgreSQL 


¢ NoSQL Database 


oO MongoDB 
SB Redis 


¢ Deployment 
¢ Environments 
* Production 
« Development 


* Staging 
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¢ Hosting Platforms 


Vercel Netlify Firebase Render 


Heroku AWS Amplify Railway 


+ Advanced (plus) 


* Cl/CD — Continuous Integration/Continuous Deployment 


* Docker 


Building backend applications can be challenging, but you can acquire 
the necessary skills with sufficient practice. If you're interested in in- 
depth project tutorials that specifically teach backend development 
using Express and MongoDB—a highly popular stack—feel free to 


explore some of our free courses available on YouTube: 


BUILD AND DEPLOY 


A FULL STACK Full Stack MERN Project - 
MERN APP Build and Deploy an App | 


YouTube 


atch and Code Now 24 
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Full Sack : \\ © Stack MERN App With 
MERNABP | \\) . . CRUD, Auth, Charts - YT 


> 
Re atch and Code Now 2 
exes 2” cA 


If you want to enhance your skills in state management using tools like 


Redux Toolkit, you can explore our professional-level course: 


he) Build & Deploy a Full Stack 


ce erat a) == MERN Al Image Generation 
oo App | DALL-E Clone - YT 


atch and Code Now 4 


MERN App © . 


And now, at last, we will dive into the Next.js roadmap. It may not be 
necessary, as the content of this book is organized in a manner where 
each chapter serves as a guiding milestone, and it’s the only resource 
you need (alongside some Build and Deploy courses, of course) to 


master Nextjs! 


But still, for you, 


The Roadmap 


6 The Next.js 


¢ Fundamentals 


« Learn why we should use Next.js and its benefits 


* Master the basic fundamentals of web development & React.js 


State Prop Components Module 


* Familiarize yourself with the ecosystem 


Node NPM/Yarn NPX 
* Setup a nextjs application using create next app 


« Architecture 


Understand the architecture of a Next.js application including 


different files and directories i.e., app directory vs pages directory. 


Next, dive into the backbone of Next.js functionality by exploring 


two distinct rendering processes: 


Client Server 


¢ File Based Routing 


Learn how to create different types of routes in Next js 


Simple route Nested Dynamic Parallel Intercepting 


The Roadmap 


Style 


Next.js has built-in support for CSS processors like Sass to CSS 
modules. Try different types of styling with Nextjs to find the one 


that best fits your application: 


CSS modules Tailwind CSS Sass 


Data Fetching 


You have the flexibility to choose between different types of 
rendering and data fetching methods for your application. These 


methods include: 


SSG — Static Site Generation 
SSR — Server Side Rendering 
ISR — Incremental Static Regeneration 
CSR — Client Side Rendering 


It's important to understand each of these concepts in detail to 
determine how and when to implement the most suitable 


strategy for your application. 


SEO and Metadata 


Learn how to use SEO strategies and leverage the use of Metadata 
API of Next.js 


Points to learn: 


Static Metadata Dynamic Metadata File based Metadata 
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Handling Errors, loading states and much more 


The latest Next.js 13 app directory introduces various file 
conventions that facilitate effective error handling, loading state 
management, displaying not found pages, and even organizing 


layouts in a more structured manner. 


Learn, 


error.js file loading.js file not-found.js file layout.js file 


Authentication 


Implementing custom email/password or social authentication 
becomes hassle-free with NextAuth in Next.js. Few auth libraries 


you can use with Next.js to soeed up the development process: 


NextAuth Clerk 


API routes 


Explore how to create API routes — the backend: 


« Route Handlers 
Create custom request handlers 


Static Route Handlers Dynamic Route Handlers 


¢ Middleware 
¢ Supported HTTP Methods 
* NextResponse 


« CORS and Headers 
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¢ Database 


Discover how to incorporate various types of databases into your 


Next.js application by utilizing API routes. 


MongoDB Postgres Prisma 


If youre someone who prefers video content over reading, you'll find our 
best and most up-to-date Crash Course on Next.js 13 on YouTube very 
enjoyable. This course not only covers the fundamentals of Next.js but 
also guides you in building a Full Stack project with authentication, 


utilizing the latest features of Nextjs 13: 


(We) Next.js 13 Full Course 2023 | 
Next.js Full Build & Deploy a Full Stack 
Course 2023 Application - YouTube 


Build a REAL Full Stack App 
atch and Code Now 7” 


If you have a keen interest in learning how to implement complex 
filtering, pagination, and searching using server-side rendering (SSR) 


with Next.js, then you should check out this resource: 


Build and Deploy a Modern 
ate Next.js 13 App | TypeScript, 
Tailwind CSS - YouTube 


atch and Code Now 2 


Application 
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Keep in mind that real progress happens when you actively do coding. 
So, grab coffee, find a quiet spot, and start coding to make things 


happen. 


CHAPTER 4 


How it works 


In this chapter, we lay the foundation by understanding how the web 
works before diving into Next.js code. We explore the traditional 
approach of HTML, CSS, and JavaScript websites, where the server 


sends complete files to the client for each page request. 


We also introduce the React way, where the server sends a minimal 
HTML file and a bundled JavaScript file, and React manipulates the 


virtual DOM for efficient rendering. Finally, we discuss the Next.js way. 


How it works 


How it works 


You might be itching to start with Next.js code, right? 


Although writing code is important, we must first build our foundations. 
It’ll not just help you in clearing interviews but will also help in making 


sound decisions in your application. 


If your why isn’t clear, you'll have no idea what you're doing, and you'll 
blame it on Next.js by saying that it’s an overrated piece of technology. 
That will only showcase your lack of knowledge. It's a foolproof recipe to 


amaze everyone with your impressive ignorance. 
So, perfect your why and your how will come naturally. 


Let's time-travel a bit to see how things were used to work with 


different technologies. 


The vanilla — HTML, CSS, and JavaScript 


Websites built using the web's fundamental elements, namely HTML, 
CSS, and JavaScript, function differently compared to the latest 


technologies. 


When a user visits such a website, their browser (the client) sends a 
request to the server (another computer where the site is hosted) 


asking for the content to be displayed. 


Traditionally, for each of these requests, the server responds by sending 
three files i.e., the HTML, CSS, and JavaScript (only if any JavaScript code 


is involved). 


How it works 


The client's browser receives these files and begins by analyzing the 
HTML file. Then, it applies the styles from the CSS file and implements 
any user interaction, such as event handlers or dynamic behavior, 


specified in the JavaScript file on the webpage. 


Although writing code is important, we must first build our foundations. 
It’ll not just help you in clearing interviews but will also help in making 


sound decisions in your application. 


If your why isn’t clear, you'll have no idea what you're doing, and you'll 
blame it on Next.js by saying that it’s an overrated piece of technology. 
That will only showcase your lack of knowledge. It's a foolproof recipe to 


amaze everyone with your impressive ignorance. 
So, perfect your why and your how will come naturally. 


Let’s time-travel a bit to see how things were used to work with 


different technologies. 


SHS) The vanilla — HTML, CSS, 
and JavaScript 


Websites built using the web's fundamental elements, namely HTML, 
CSS, and JavaScript, function differently compared to the latest 


technologies. 


When a user visits such a website, their browser (the client) sends a 
request to the server (another computer where the site is hosted) 


asking for the content to be displayed. 


How it works 


Request 


Chazy 


> 


Analyzing the HTML file 


a 


Applies the styles 


{i} 


Implements any user interaction 


Traditionally, for each of these requests, the server responds by sending 
three files i.e., the HTML, CSS, and JavaScript (only if any JavaScript code 
is involved). The client's browser receives these files and begins by 
analyzing the HTML file. Then, it applies the styles from the CSS file and 
implements any user interaction, such as event handlers or dynamic 


behavior, specified in the JavaScript file on the webpage. 


The client will send additional requests to the server if the website has 
multiple pages. In response, the server will send the three files 


containing the respective content needed to render each page. 


How it works 


What's the catch? 


Processing 


Most processing occurs on the client side, meaning the user's web 
browser is responsible for rendering the HTML page and executing any 
JavaScript code present. 


However, if the website is complex and the user's device needs more 
capabilities, it can strain the browser and create a burden for it to 
handle. 


Bandwidth 


As the server sends complete files to the client for each page request, it 
increases bandwidth usage. This becomes particularly significant when 
dealing with complex websites containing numerous pages and video 
and audio clips scattered throughout the site. 


Load Time 


The initial page load time may be longer when compared to the latest 
technologies. This is due to the complete transfer of files for each 
request. Only after the server has sent all the necessary files and the 
browser has finished parsing everything will we be able to view the 


website's content. 


How it works 


>The React way 


This is where React comes in. It improved the development lifecycle by 
introducing components, virtual DOM concepts, and the client-server 


mechanism. 


When you access a React website, the client's browser sends a request 
to the server for the webpage content. In response, the server sends a 
minimal HTML file, which serves as the entry point for the entire 


application, along with a bundled JavaScript file. 


React initiates client-side rendering using this JavaScript file, 
manipulating the virtual DOM. Instead of directly modifying the actual 
DOM, React updates the virtual DOM and then applies only the 
necessary changes to the real DOM, resulting in the desired page 


display. 


React utilizes its client-side routing library, React Router, to navigate to 
different pages within the React application. This library enables 
changing the route without a full server request, preventing page 


refreshes. 


React Router re-renders the relevant components based on the new 
URL when a new route is triggered. If the new page requires fetching 
data from the server, the corresponding components initiate requests 


to retrieve the necessary data. 


How it works 


What's the catch? 
Complexity 


Building a React application can present greater complexity than 
traditional HTML, CSS, and JavaScript websites. It involves thinking in 
components, managing state and props, and working with the virtual 


DOM, which may require a learning curve for developers new to Reacts. 


Processing 


Similar to the traditional approach, react primarily performs client-side 
rendering. It heavily relies on JavaScript for initial rendering and 
subsequent requests to update the user interface, which are all handled 


on the client’s browser. 


However, this reliance on client-side rendering can delay rendering and 
interactivity, particularly on devices with slower processors and limited 


resources. 


SEO 


Yes, if you recall, we previously touched upon a notable drawback of 


React compared to Next.js in the Introduction chapter. 


The issue is that search engine crawlers might need help fully 
accessing the website's content since everything is handled through 
JavaScript and only rendered on the client side. As a result, it impacts 


the website's visibility in search engine results 


How it works 


@Q The Next.js Way - A blend of both 


Knowing the benefits and limitations of both techniques, Vercel 
developers allowed us to choose where to render the content, on the 


client or server. 


Typically, when a user visits a Nextjs site, the client sends the request to 
the server, which starts executing the React Components, generates 
HTML, CSS, and JavaScript files, and sends back the fully rendered HTML 
to the client as a response. This file includes initial content, fetched 
data, and React component markup, making the client render it 


immediately without waiting for JavaScript to download and execute. 


But it doesn’t mean we don't receive any JavaScript files. The server will 
still send the JavaScript code as needed for the user interaction. From 


here, Next.js takes over and performs client-side hydration 


Have you ever encountered the issue of a hydration error where the 
user interface doesnt match what was originally rendered on the 


server? 


Well, this is what it is about. Hydration is attaching JavaScript event 
handlers and interactivity to the pre-rendered HTML. And when the 
placeholders of React components i.e., div, form, span, don’t match 


what's being rendered on the client side, you see that error. 


This is what it is — The hot topic of web development i.e., SSR. 
Server Side Rendering! 


How it works 


For subsequent requests, you have full control over where to render 
your page content i.e., either on the server side (SSR) or the client side 
(CSR). 


In the following chapters, we'll talk in-depth about different types of 
server-side rendering along with client-side rendering and when and 


where to render what. 


CHAPTER 5 


Create a Next.js 
Application 


In this chapter, we lay the foundation by understanding how the web 
works before diving into Next.js code. We explore the traditional 
approach of HTML, CSS, and JavaScript websites, where the server 


sends complete files to the client for each page request. 


We also introduce the React way, where the server sends a minimal 
HTML file and a bundled JavaScript file, and React manipulates the 


virtual DOM for efficient rendering. Finally, we discuss the Next.js way. 


Create a Next.js Application 


Create a Next.js Application 


By now, you should fully understand how the websites load. Now it’s 


time to learn how to create websites using Nextjs. 


Setting up a Next.js application can be done in various ways. However, 
before we dive into that, there are a few things we need to have in place 
to get started with Nextjjs. The first requirement is having Node.js 16.8 or 
a more recent version. It's worth noting that there is a common 


misconception that Node,js is a new programming language. 


In reality, it’s a JavaScript runtime that enables the execution of 


JavaScript code outside of a web browser. 


If you havent installed Node.js before, you can visit [thig link and start 
downloading it. The website will give you two options based on your 
operating system: LTS and Current. The LTS (Long Term Support) version 
is the most stable, while the Current version is like a “Work in Progress” 


that adds new features but may have some bugs. 
So, did you download it? 


To determine the version you're using and check if you've downloaded 
Node.js, you can execute this command in your terminal or Command 


Prompt to verify: 
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Next, we require a Code Editor. Considering that Visual Studio Code 
(VSCode) is an exceptional editor, we suggest using it. You can visit |thig 
link, and depending on your operating system (OS), you will find the 


appropriate download link. The download process and installation 


process is as straightforward as it gets. 


Create a Next.js Application 


After downloading Node.js and VSCode, let's set up your first Next.js 


application. 


Go to the desired location where you want to create your project. It can 
be any location, but it's advisable to maintain an organized structure. 
Create a new folder inside that location and name it "NextEbook." If you 
prefer a different name, feel free to choose one. This folder will hold all 


the code we will cover in this ebook. 


@& Tutorial 


Now, let's proceed with the following steps to open the folder we just 


created in our chosen code editor, which is VSCode: 


1. Launch VSCode. 

2. Click on the "File" option in the top menu bar. 

3. From the dropdown menu, choose "Open Folder.” 

4. Browse to the location where you created the "NextEbook" folder. 
5. Select the "NextEbook’ folder. 

6. Click on the “Open” button. 
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Following these steps, you can view your "NextEbook" folder in VSCode. 


VSCode provides its own built-in terminal, eliminating the need for 
developers to open the OS Terminal or Command Prompt separately. 
With the inline terminal in VSCode, we can perform all necessary tasks 


within the application. 


To open the terminal, press ctrl + * (backtick) or click on the 
"Terminal" option in the top menu bar. From the dropdown menu, select 


"New Terminal.” The terminal window will appear as follows: 


oO 


NEXTEBOOK 


OUTLINE 


TIMELINE 


For the final, let’s now create our Next.js application. There are two 


options: 


* Automatic Installation 


* Manual Installation 
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As the name implies, manual installation involves obtaining and 
configuring packages individually and organizing the initial file and 
folder structure along with some code. We'll have to do everything on 


our Own. 


On the other hand, the alternative approach aims to accelerate the 
development process by allowing us to create the application with our 
preferred choices. Depending on our preferences, such as using 
TypeScript or not, incorporating styling libraries like Tailwind CSS, or 
opting for other options, we can set up the complete project with just 
one click. 


Being widely used and an easy installation choice, we can create a 
next.js project by running a Zero Dependency CLI (Command Line 
Interface) tool — create-next-app. You can visit thig link if you want to 
know about this in detail. Inside, you'll see how the create-next-app has 
been created with the templates, including with/without JavaScript, 
Tailwind CSS, etc. 


Don’t worry; you don’t need to download create-next-app as another 


global package. Thanks to npx! 


When you installed Node.js, you also got two other useful tools: 


NPM NPX 


NPM, which stands for Node Package Manager, allows us to manage 
and download various packages (collections of code) that we need to 
run our application. For example, packages like Axios for making HTTP 


requests or Redux Toolkit for state management. 
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On the other hand, NPX, short for Node Package Runner, is a command- 
line tool. It lets us execute packages without installing them globally on 
our system. It's important to note that npx is used to run command-line 
tools and execute commands from packages, but it doesn't handle the 
installation of packages. That responsibility falls to nom, which takes 


care of package installation. 


Let's move on from the theoretical discussion and proceed with the 


command that will automatically install the necessary packages for 


running a Next.js application. 


create-next-app@] 


As soon as you press enter, it will prompt you to confirm whether it can 
download the required packages. Please select "yes" to proceed with 
the installation. 


During the installation process, we will encounter a series of prompts 
individually. These prompts allow you to choose the specific features 


and configurations we desire for our Next.js application. 


What is your project named? introduction 

Would you like to use TypeScript with this project? No 
Would you like to use ESLint with this project? No 

Would you like to use Tailwind CSS with this project? No 
Would you like to use src/ directory with this project? No 
Use App Router (recommended)? Yes 


Would you like to customize the default import alias? No 


Let's choose not to include TypeScript, ESLint, and Tailwind CSS. In the 


upcoming chapters, we will explore these options in detail. 
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If you see the installation process carefully, you'll see “Using nom.” 
npx is used solely to execute commands from packages, while nom 


handles the installation of those packages. 


And there you have it! The Next.js application has been successfully 
installed & 


Now, let's explore what's inside. Click on the “introduction” folder or the 


name you chose for your project. Inside, you will find several files and 


folders. 


@ Welcome to RapidAPt Client (RW 
Learn the Fundamentals 


Boost your Prod 


UTLINE 


TIMELINE 


BD App 


It’s the root of the application, where we'll create various client 
(frontend) routes and potentially write backend code. Initially, you'll find 


some starter files in this location, including: 
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favicon.ico 


It represents the website's favicon displayed in the browser's tab. By 
default, the favicon will be the Vercel icon. You can replace it with the 


one you like. 


oe eb 


NEXTEBOOK 


OUTLINE 


TWMELINE 


globals.css 


This file holds the CSS code for the application. It is a global file where 
you can define CSS variables, import fonts, or perform other CSS 


initialization tasks. 


You can keep the file, rename it, or even move it to a different location. It 
doesn't matter. However, if you make any changes to this file, you must 


update any other parts of the application that rely on it. 
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ee Z global.css 


EO Oia: 
--max-width: 1100px; 

--border-radius: 12px; 

--font-mono: ui-monospace, Menlo, Monaco, ‘Cascadia Mono', 

‘Segoe UI Mono','Roboto Mono', ‘Oxygen Mono', ‘Ubuntu Monospace’, 
"Source Code Pro','Fira Mono', ‘Droid Sans Mono', monospace; 


--foreground-rgb: 0, 0, 0; 
--background-start-rgb: 214, 219, 220; 
--background-end-rgb: 255, 255, 255; 


--primary-glow: conic-g3 
om 180deg at 50% 50%, 
16éabff£33 Odeg, 
O885ff33 55deg, 
54d6££33 120deg, 
#0071££33 160deg, 
transparent 360deg 


--secondary-glow a 
wpe, 255, Zi, Al), 
MAC(Za, 255, 255, ) 


layout.js 


It’s the main entry point of the application. The root. The parent. The 


layout. Whatever you prefer to call it. 


If you write anything in there, it'll appear on each & every client 


(frontend) route. It’s universal. 


If you need to import fonts, add metadata, wrap the application with 
Redux, or show a Navbar, this is the place to do it. All these tasks can be 
performed within this file. 
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page.js 

It’s an alias of the home route ie., “/”. It's important not to confuse this 
file with layoutjs. Whatever you write inside page,js will be displayed 
only on the "/" route, while anything inside layouts will appear across all 


routes, including the home route i.e., od 


In short, layoutjs is the parent of page.js, providing a common layout for 


all pages. 
page.module.css 


This CSS file is specifically designed to style a particular page 
component or module. The naming convention .module.css indicates 
that the CSS rules in this file are scoped to a specific component. In this 


case, it corresponds to the page.js component. 


If you closely examine the code, you will notice the presence of the 


following: 


inside the page.js file. 
Pi) Node Modules 
Well, it’s the backbone! 


The node_modules directory is a storage location for all the 
dependencies or packages required to run a project. Whenever we 
install packages using npm, the corresponding code for those 


packages is placed inside this directory. 
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For example, if we install Axios, a folder named axios will be created 
within the node_modules folder. If you've been following closely, you 
may have noticed that Next.js is built on top of React. Therefore, you can 
explore the node_modules folder to find the react folder, which contains 


the code for React itself. 


In addition to React, you'll come across several other folders such as 
next (which enables Next.js-specific features), react-dom, postcss, 
styled-jsx, and more. Each of these folders contains numerous files 


and lines of code essential for running our Next.js application. 


No need to worry, though. You don't have to interact with or visit this 
directory in the future (unless something terrible happens). nem 
automatically manages the node_modules folder when we install or 


uninstall node packages. 


DP Public 


It’s a special folder allowing us to include static assets like images or 


files like fonts, videos, etc. 


The content inside this folder is automatically optimized and available 
throughout the application. Thus it’s advisable to put any PNGs, JPEGs, 


or SVGs we need inside this folder. 
um _.gitignore 


The .gitignore is a special text file that tells Git, the version control 


system, to exclude certain files and directories from being tracked. 


One common entry in the .gitignore file is node_modules. 
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This is because the node_modules directory contains many files and 
folders generated when installing dependencies for a Node.js project. 
Including these files in version control would create unnecessary clutter 


and increase the size of the repository. 


As said by the Creator of Node.js — Ryan Dahl 


un Neutronstar Blackhole node_modules 


HEAVIEST 
OBJECTS IN THE 
UNIVERSE 


We would certainly not want to track the “Heaviest Object” in the 


universe! 
» jsconfig.json 


Remember the prompt that appeared when we ran the Next.js CLI tool? 
It asked us if we wanted to customize the default import alias, and we 
chose "No". 
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Would you like to customize the default import alias? No 


Well, the jsconfig. json file is related to that question. It act as a 
configuration file where we can set various options and settings for our 


project. One of the things we can configure is the import behavior. 


By default, when we want to import code from one file into another, we 


use relative paths like this: 


Tt something from 


This is the correct, but sometimes long and complex, relative path. 


In larger projects or projects with complex directory structures, 
manually specifying relative paths for each import can become tedious 


and prone to errors. 


However, by configuring the compilerOptions in the jsconfig. json 
file, we can inform the compiler about a specific import path structure 


that we want to use. 


If we take a look at the content of the jsconfig. json file, we have: 
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In this configuration, we have defined path aliases using @/*. This 


means that now we can do the following: 


t something from 


i.e., using @/* for any files and folders located in this location . /x i.e., the 


root! 


Feel free to customize the alias to your preference. You can change @/* 


to @* or even #/*x — the choice is yours! wy 
© package-lock.json 
Have you ever think of this as an unwanted file? 


Well, let me tell you, it's actually quite important. This file, called 
package-lock. json, is automatically created when we install or make 
changes to packages. It serves as a lock file, carefully keeping track of 
the specific versions of all the installed packages and their 


dependencies. 


Let's imagine a scenario: You're working on a Next.js project. After 
completing your work, you share the project code with your manager, 


but you omit the package-lock. json file, thinking it's not essential. 


Now, your manager starts downloading the packages listed in the 
package. json file. The package manager, npn, installs the specified 
packages and their dependencies (i.e., the folder and files we have 


seen inside the node_modules folder). 
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However, if any dependencies release a new version, the package 
manager will eagerly download it. And unfortunately, if this new version 
may contain unresolved bugs or compatibility issues, it can cause your 


application to misbehave. 


As a result, your manager may become frustrated, saying, "It doesn't 
work on my machine ®," while you feel helpless, responding with a 


disheartened "It works on my machine ®&." 
Know the importance and always share your package- lock. json file W 
© package.json 


Think of this as an info card that tells about you — who you are, where 


you are from, etc. but with more complete details. 


Along with containing the information regarding the name of the 
project, and its version, it tells us the dependencies and dev 


dependencies required to run this project 


dependencies 


List of the packages that are necessary for the project to run the 


production environment 


devDependencies 


List of packages that are only needed during the development process. 


For example, linting packages like eslint. 


Whenever we install a package, whether a dependency or a dev 
dependency, nom automatically records the package name and its 


corresponding version in the respective section of the package. json file. 
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This way, the package. json file records all the packages required for 
the project, making it easier to manage and reproduce the 


development and production environments accurately. 


Other than that, we can see another part i.e., “scripts”. It contains 
executable commands or scripts using nom. We can completely 
customize it. Through these commands/scripts, we run tests, build a 


project, start a development server, or deploy the application. 
Last but not least, 
fp README.md 


It’s a like @ manual or guidebook for your project — a text file where we 
can write down important information about our project, such as how to 


install it, what it does, and how others can contribute to it. 


Having a good README helps people understand what our project is all 
about and how they can use it or get involved. It's like giving them 


directions or instructions on how to make the most of our project. 


Now, let's finally run our application. We need to execute one of the 
commands from the "scripts" section we just mentioned, specifically the 


"dev" command. 


Before proceeding, ensure the terminal's path is set to the correct 
location. Since we created a subfolder called “introduction” inside the 
"NextEbook’ folder, we need to navigate into it. To do that, enter the 


following command in the open terminal: 


introduction 


The "cd" command, which stands for “change directory,” will navigate us 


inside the “introduction” folder. 


Now run, 


This command will start a local machine's development server on port 
3000. To see the application in action, open your preferred web browser 
and type the URL: http: //localhost: 3004 If you have followed all the 
previous steps correctly, you should be able to see the application 


running as expected: 


© © © Create Next App + v 


€ > CC @ http/localhost:3000 o* 2 OO: 


Docs > Learn > Templates > Deploy > 


Phew, a lot of explaining just to cover the initial file and folder structure. 
But it’s of no use if we don’t take any actions. Let’s change few things 


from the repo to see how it works. 


Open the page. js file and delete all the existing code. We'll start fresh 


by creating the Home component. 


export default function Home() { 
return 
< 


<p>Hello World W</p> 
<i > 


After making the changes, save the file and return to your browser. If 
you visit the localhost again, you should see the updated content of 
"Hello World 83" without manually refreshing the page. This is possible 
because of the Fast RefresH feature of Next.js, which automatically 
reflects the changes in real time as we edit the code. 


Now, open the layout. js file and add text inside the body tag: 
tmport './ liseessme 
import { Inter } fro 
const inter = Inter({ 


export const metadata 


be 


export default function RootLayout({ children ¢) ? 
return 
< lang="en"> 
className=finter.classNamet> 
<p>Hello, I'm Groot *</p> 
{children} 
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Take a moment to ponder: Where will this text appear? Will it be 
displayed before the "Hello World *" or after it? Or perhaps it won't be 


displayed at all since we are on the home route, which is "/". 
3, 2, 1... finished thinking? 


To find the answer to your question, visit the browser. And you're right! 


The text will be displayed before the "Hello World 


e Create Next App ote ™ 


€ > C  @ http:/localhost:3000 he @o: 


Hello, I'm Groot @ 
Hello World Y 


Why? Because layout. js is parent or root of the application. 


But why before the “Hello World “3”? Because we are rendering the 


children components of layout .js after the text "Hello, I'm Groot @". 


className=4inter.className}> 
<p>Hello, I'm Groot ®</p> 


$children} 
</ > 


Reverse the order, and see the magic, i.e.: 


className={inter.className}> 
{children 


<p>Hello, I'm Groot ™</p> 
<j) > 


The children prop is passed by Next.js to the RootLayout component in 
layouts. It contains all the child components or route components of 
the application, starting from the home route and extending to any 


other routes that we may create. 


export default function RootLayout({ children +) { 
return 
< lang="en"> 
className={inter.classNamet> 
<p>Hello, I'm Groot *</p> 


q 
{children} 


</ 


Clear enough? 


Amazing! Before you rush to start the next chapter, | have a few tasks for 


you to complete: 


Create a Next.js Application 


Tasks & 


@ Comment down the {children} inside the RootLayout and see if you 


can still see the “Hello World ©” 


',./globals.css' 
‘next/font/google' 


const inter = Inter({ subsets: ['latin'] }) 
rt const metadata = { 


title: ‘Create Next App', 
description: ‘Generated by create next app', 


function Root 


<html lang="en"> 


<body className={inter.className}> 
<p>Hello, I'm Groot * </p> 


Explain the purpose of Node.js in the context of Next.js and web 
development. 


Explain the purpose and usage of the create-next-app CLI tool 
and why we use npx with it. 


What is the role of the node_modules directory in a Next.js 
project? Why is it recommended not to include it in version 
control? 


CHAPTER 6 


Client Vs. Server 


In this chapter, we lay the foundation by understanding how the web 
works before diving into Next.js code. We explore the traditional 
approach of HTML, CSS, and JavaScript websites, where the server 


sends complete files to the client for each page request. 


We also introduce the React way, where the server sends a minimal 
HTML file and a bundled JavaScript file, and React manipulates the 


virtual DOM for efficient rendering. Finally, we discuss the Next.js way. 


Client Vs. Server 


Client Vs. Server 


So far, we understand that Next.js does a mix of server-side and client- 
side rendering to get the best of both worlds. But we need to find out 
which parts of the application are rendered on the server side. Can we 


choose what to render in each environment? 
And if so, how can we do that? 


Before we answer these questions, let's go back and remind ourselves 
what we mean by client and server. What do these terms actually 


mean? 


Client 


The client refers to the device you are currently using, such as your 
smartphone or computer. The device sends requests to the server and 


displays the interface that we can interact with. 


Server 


The server is essentially just a computer device, but it is equipped with 
strong configurations and remains operational continuously. It is where 
all the code for our application is stored. When the client, our device, 
sends a request, the server performs the necessary computations and 


sends back the required outcome. 


In previous versions of Next.js, specifically versions before 13, we faced a 
limitation where server-side rendering was restricted to individual 
pages. This meant that only the route pages like "/", "/about", "/projects", 


and so on could be rendered on the server side. 
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This limitation led to challenges such as prop drilling and duplication of 


API calls when passing data to lower-level components. 


| recommend reading this article to gain a deeper understanding of the 
differences between the pages directory and the app directory in Next.js 
and how they address these limitations. It provides detailed insights 


into the topic: 


Less code, better UX: 
Fetching data faster with 
the Next.js 13 App Router 


[inctebied - 


And that, my friends, is where the app directory comes into action. It not 
only introduced many features but also brought about a revolutionary 


change, i.e., — Component level Server Side Rendering. 
What does that mean? 


It means that now we have the ability to choose where we want to 


render specific components or a section of code. 


For instance, let's consider a component called Navbar. jsx. With this 
new capability, we can decide whether we want to render it on the 


server side or the client side (in the user's browser). 


And that's how we end up with two types of components: Client 


Components and Server Components. 
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What are these? 


Simply put, both are React components, but the difference lies in where 


they are rendered. 


Client Component - A react component that runs/renders on the user's 


device, such as a web browser or mobile app. 


Server Component - A react component that runs/renders on the 


server, i.e., the infra or place where we'll deploy our application 


But why would we want to render such a small component on the 
server side? 


Well, think about it! 


By strategically deciding to render certain components on the server 
side, we save users’ browsers from doing extra work with JavaScript to 
show those components. Instead, we get the initial HTML code for those 
components, which the browser can display immediately. This reduces 


the size of the JavaScript bundle, making the initial page load faster. 


And as discussed above, we'll overcome our limitations with the pages 
directory. Rather than fetching and passing data to components 
separately, we can fetch the data directly within the component, 


turning it into a server component. 


Overall, we'll have these benefits if we choose to do server-side 


rendering: 


Smaller JavaScript bundle size: The size of the JavaScript code that 


needs to be downloaded by the browser is reduced. 
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Enhanced SEO (Search Engine Optimization: Server-side rendering 
helps improve search engine visibility and indexing of your website's 


content. (remember?) 


Faster initial page load for better accessibility and user experience: 
Users can see the content more quickly, leading to a smoother 


browsing experience. 


Efficient utilization of server resources: By fetching data closer to the 
server, the time required to retrieve data is reduced, resulting in 


improved performance. 
Okay, but when to decide what to render where? 


As their name suggests, where to render each component depends on 


what the component does. 


If a component needs the user to interact with it, such as clicking 
buttons, entering information in input fields, triggering events, or using 
react hooks, then it should be a client component. These interactions 
rely on the capabilities of the user's web browser, so they need to be 


rendered on the client side. 


On the other hand, if a component doesn't require any user interaction 
or involves tasks like fetching data from a server, displaying static 
content, or performing server-side computations, it can be a server 
component. These components can be rendered on the server without 


specific browser features. 


Ask yourself: 
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Does the component require user interactivity? 


Yes — Client Component No — Server Component 


To simplify things, the Next.js documentation provides a helpful table 


that guides you on where to render each component. 


What do you need to do? Server ellen 
Component Component 

Fetch data. w x) 

Access backend resources (directly) i} ® 

Keep sensitive information on the server (access gw x} 

tokens, API keys, etc) 

Keep large dependencies on the server / Reduce gw © 

client-side JavaScript 

Add interactivity and event listeners (onClick (), & G 

onChange(), etc) 

Use State and Lifecycle Effects (useState(), (3) gw 

useReducer(), useEffect(), etc) 

Use browser-only APIs x) Y 

Use custom hooks that depend on state, effects, or x] G 

browser-only APIs 

Use React Class components i) gw 
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Impressive! You've just discovered one of the most significant features 


of the modern era. Take a well-deserved break! 
Ready for more? 


Another groundbreaking aspect of Next.js 13's app directory is that all 
components are automatically considered server components by 
default. That's right; every component is treated as a server component 
unless specified otherwise. 


So how do we differentiate it from the client components? 


Well, it's as simple as writing "use client" at the top of the component 
file. It's a straightforward and slick way to indicate that the component 


should be treated as a client component. 
That's enough theory for now. Let's dive into coding ¥ 


To get started, follow the steps outlined in the previous section to 


quickly set up a new Next js project within the same NextEbook folder. 


Before proceeding, ensure that the terminal's path points to the 
NextEbook folder and not the previously created introduction folder. 
To navigate out of the introduction folder, you can run the following 


command: 


Now, execute the create-next-app command. In this example, I'll be 
using the name client-server for the new folder, but feel free to 


choose any name you prefer. 
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Once the installation is complete, use the cd command to navigate into 


the client-server folder and start the application. 


Now go to the app folder, then to the page.js file, and delete all other 


content except for the main and h2 tags: 


ee ® app/page.js 


import styles from './page.module.css' 


export default function Home() { 
console.log("Where do I render?" 


return 
K c ={styles.maint> 
>Welcome W</h2> 


If you prefer, you can delete everything else from the page.module.css 


file and keep the styles only for the main tag of HTML. 


ee 3 app/page.module.css 


-main { 
display: flex; 
flex-direction: column; 


align-items: center; 


padding: 
min-height: 


After adding a console log in our page js file, let's open our web browser 


to see if it appears there: 
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Once the installation is complete, use the cd command to navigate into 


the client-server folder and start the application. 


@ © © Create Next App + ao 


€ > Ca http/localhost 


Welcome & 


Hmm, “Where do | render?” is not there. How on Earth? & 


Indeed, you are correct. As previously discussed, all these components 


will be Server Components by default! 


So where do we see the console statements if not in the browser 


console? You know that, right? 


The terminal! Let's return to our terminal and check if the mentioned log 


text is present there: 
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And there we go, the log is there & 
Now let’s create two more components for each Client and Server. 


Inside the root of the folder, i.e., outside of the app folder, create a new 
folder and name it components. Create two new files inside it, 


ExampleClient.jsx and ExampleServer. jsx. 


ee £& components/ExampleClient.jsx 


"use client"; 


const ExampleClient = () => { 
console.log("I'm Client Component :)"); 


return 
< > 
<p>This an example client component</p> 


export default ExampleClient; 
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And the small ExampleServer component as 


ee &» components/ExampleServer.jsx 


ist ExampleServer = () => 3 


console.log("I'm Server Component :)"); 


return 
< > 
<p>This is an example server component</p> 


export default ExampleServer; 


Now, first import & use the ExampleClient component inside the app/ 


page.js file: 


ee & app/page.js 


import styles from './page.module.css' 
import ExampleClient from '@/components/ExampleClient' 


export default f ion Home() ¢ 
console.log("Where do I render?" 


return 
< cul ame={styles.maint> 
<h2>Welcome W</h2> 


<ExampleClient /> 
> 


Perfect. Let’s check where we see which console log & 


First browser, 


Okay, that’s right, right? We explicitly said Next.js to render 


ExampleClient.jsx as Client Component. Fair enough! 


Going back to the Terminal, we see... 
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Both of them, why? 


This is because Next.js performs pre-rendering certain content before 


sending it back to the client. 


So basically, two things happen: 


* Server Components are guaranteed to be only rendered on the 
server 


* On the other hand, client components are primarily rendered on the 
client side. 


However, Next.js also pre-renders them on the server to ensure a 


smooth user experience and improve search engine optimization (SEO). 


Next.js, by default, performs static rendering, which means it pre- 
renders the necessary content on the server before sending it to the 
client. This pre-rendering process includes server and client 
components that can be pre-rendered without compromising 


functionality. 


The server Component is the latest React.js Feature. Next.js has 


simply used it over what they had, making the setup easy. 


Let’s play around with these components a little more. Now, import the 


ExampleServer component inside the app/page. js file 
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ee ® app/page.js 


import styles from './page.module.css' 
import ExampleClient from '@/components/ExampleClient' 
import ExampleServer from '@/components/ExampleServer' 


export default function Home() { 
console.log("Where do I render?" 


return 
< className={styles.maint> 
<h2>Welcome W</h2> 


<ExampleClient /> 
<ExampleServer /> 
> 


And now, if we visit the browser, along with showing both client-server 
component text on the website, it'll only show the “I'm Client Component 


:)” log inside the browser's console: 


e Create Next App + ¥ 


€ > C  @ http:/localhost;3000 oO * a@2aO: 


Welcome © 
This an example client component 
This is an example server component 
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Whereas the terminal will show all the three console logs 


All good! 


For the final play, let's remove the ExampleServer from app/page.js 


and add it inside the components/ExampleClient.js 


ee & app/page.js 


import styles from './page.module.css' 
import ExampleClient from '@/components/ExampleClient' 


export default function Home() { 
console.log("Where do I render?" 


return 
& Cc ={styles.maint> 
<h2>Welcome W</h2> 


<ExampleClient /> 
> 
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And the ExampleClient will look like this: 


ee &> components/ExampleClient.jsx 


"use client"; 


import ExampleServer from "./ExampleServer"; 


ExampleClient = () => q 
console.log("I'm Client Component :)"); 


return 
<> 
< > 
<p>This an example client component</p> 
<// > 
<ExampleServer /> 


export default ExampleClient; 


Hit save and see the result in both the Terminal and Browser console. 


First, let’s see what the terminal shows: 
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As expected, we see all three console logs due to the pre-rendering of 


Next.js and the server feature. 


But something doesn’t look good in the Browser console... 


© © © Create Next App + y 


€ > C  @ http:/ocalhost:3000 oO * a@2QO: 


Welcome 


This an example client component 
This is an example server component 


Why is the server component log appearing here? Wasn't it supposed 


to be on the server side only? 


Well, in Next.js, there is a pattern at play. When we use “use client’ in a 
file, all the other modules imported into that file, including child server 


components, are treated as part of the client module. 


Consider “use client’ as a dividing line between the server and client 
code. Once you set this boundary, everything inside it becomes client 


code. 


Understooa? If not, there is no need to worry. 
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Just remember: Do not include server components inside the client 


components. 


And in case you encounter such a scenario, we have a solution. We'll 
discuss it in detail in its dedicated section, where we'll dive into the 
rendering process of client and server components. Additionally, we will 
share some valuable tips and tricks on creating different types of 


components depending on real-world examples. 


Before we dive into yet another feature of Next.js, take some time out to 


work on the below tasks to solidify your learning so far: 


Tasks & 


@ Add “use client” inside the app/page. js file and see where the 


console logs are appearing: 


ee & app/page.js 


"use client" 


import styles from './page.module.css' 


import ExampleClient from '@/components/ExampleClient' 


export default function Home() { 
console.log("Where do I render?" 


return 
< Cc \ ={styles.maint> 
<h2>Welcome W</h2> 
<ExampleClient /> 
= 
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2 What are the different types of components in Nex.js, and 
explain their difference? 


ws What are the benefits of server-side rendering? 


up What are the latest features of the app directory regarding the 
client/server rendering? 


The End 


Is this the END? Absolutely not! 


COMING 
JUN 


We have an abundance of additional chapters awaiting you. Starting 
from routing, rendering, data fetching, backend API routes, database, 
typescript, and even extending to testing, best practices, and Nextjs tips 


and tricks. The ebook covers it all. 
We labeled it a "must-have" book for a reason & 


We're just scratching the surface. Stay tuned for the next update as we 


release more chapters that unlock the full potential of Next.js 13. 


Give yourself a pat on the back for completing all the chapters thus far. 
We would greatly appreciate hearing your suggestions or feedback. 
Feel free to provide your honest input through this 


With your feedback and collaboration, we will bring you the best version 


of Nextjs in the coming weeks. Thank you! 


